<script setup>

import { ref,reactive,nextTick,onMounted,watch,computed } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import { useTagsStore } from '@/stores/tag.js'
const instance = getCurrentInstance();

let emit = defineEmits(["removeTag"]);
let tagsStore  = useTagsStore();

//总体长度
let allWidth = ref(0);
//每次滑动的距离
let scrollLeft =  ref(200);
let isShowBtn =  ref(false);
let isStart = false;
let routerData = ref(null);

watch(tagsStore,()=>{

    routerData = tagsStore.tags;
    init();
},{immediate:true})
let route = useRoute();
let router = useRouter();

function init() {
    nextTick(() => {
        setWidth();
        setNowLeft();
        $(window).resize(() => {
            createScroll();
        });
    });
}


function createScroll(){
    let nowLleft = $(".scroll-bar-wc").position().left;
    let containWidth = $(".scroll-bar").width();
    if (allWidth > containWidth) {
        if (Math.abs(nowLleft) > allWidth - containWidth) {
            $(".scroll-bar-wc").css({
                left: "-" + (allWidth - containWidth) + "px",
            });
        }
    }

    showBtn();
}
function setWidth() {
    let w = 0;
    $(".scroll-bar-wc .ly-tag").each(function () {
        w += parseInt($(this).outerWidth());
    });
    allWidth = w ;
    $(".scroll-bar-wc").width(w);
    showBtn();
};
function setNowLeft() {
    if (routerData.length > 0) {
        routerData.forEach((value, index) => {
            if (value.name == route.name) {
                let containWidth = $(".scroll-bar").width();
                let w = 0;
                $(".scroll-bar-wc .ly-tag").each(function (i) {
                    if (i <= index) {
                        w += parseInt($(this).outerWidth());
                    }
                });
                if (w > containWidth) {
                    $(".scroll-bar-wc").css({
                        left: "-" + (w - containWidth) + "px",
                    });
                }else{
                    $(".scroll-bar-wc").css({
                        left: "0px",
                    });
                }
            }
        });
    }
};
function showBtn() {
    let containWidth = $(".scroll-bar").width();

    if (allWidth > containWidth) {
        isShowBtn.value = true;
    } else {
        isShowBtn.value = false;
    }


};
function scrollHandle(name){

    if(isStart)return;
    let nowleft = $(".scroll-bar-wc").position().left;
    
    let containWidth = $(".scroll-bar").width();
    isStart = true;
    if (name == "add") {
        nowleft = Math.min(
            allWidth - containWidth,
            Math.abs(nowleft) + scrollLeft.value + 2
        );
        $(".scroll-bar-wc").animate({ left: "-" + nowleft + "px" },()=>{
            isStart = false;
        });
    } else {

        nowleft = Math.max(Math.abs(nowleft) - scrollLeft.value - 2, 0);
        $(".scroll-bar-wc").animate({ left: "-" + nowleft + "px" },()=>{
            isStart = false;
        });
    }
};
function handerChange(value){
  init();
  router.push(value.fullPath);
}
function removeTag(value){


    emit("removeTag",value)

}
const hoverPath = ref('');
const overIcon = (path)=>{
  hoverPath.value = path;
  nextTick(() => {
    setWidth();
  });
}
const outIcon = (path)=>{
  hoverPath.value = '';
}
const tagsVisibleHandle = (flag,tag)=>{
  if(flag == true){
    if(tag.name == 'Hello'){
      instance.refs['dropdown'+tag.name][0].handleClose()
      return;
    }
    let otherRoute = [];
    routerData.forEach(lis=>{
      if(!(lis.name == tag.name || lis.name == "Hello")){
        otherRoute.push(lis);
      }
    })
    otherRoute.forEach(lis=>{
      instance.refs['dropdown'+lis.name][0].handleClose()
    })

    instance.refs['dropdown'+tag.name][0].handleOpen()
  }



}
const tagsHandle = (commandName,tag)=>{

  if(commandName == "self"){
    emit("removeTag",tag)
  }else if(commandName == "other"){
    let otherRoute = [];
    routerData.forEach(lis=>{
      if(!(lis.name == tag.name || lis.name == "Hello")){
        otherRoute.push(lis);
      }
    })
    otherRoute.forEach(lis=>{
      emit("removeTag",lis)
    })
  }else if(commandName == "right"){

    let rightIndex = -1;
    let rightRoute = [];
    routerData.forEach((lis,k)=>{
      if(lis.name == tag.name){
        rightIndex = k;
      }
    })

    routerData.forEach((lis,k)=>{
      if(k > rightIndex){
        rightRoute.push(lis);
      }
    })
    rightRoute.forEach(lis=>{
      emit("removeTag",lis)
    })
  }
}
</script>
<template>
  <div class="scroll-bar" ref="scroll-bar">
    <div
      class="left-btn"
      @click="scrollHandle('diff')"
      v-show="isShowBtn"
    >
      <img src="@/assets/images/double-jt.png" alt="">
    </div>
    <div class="scroll-bar-wc">
      
        <div
          class="ly-tag"
          v-for="(tag,index) in routerData"
          :key="index"
          :class="route.path === tag.path ? 'ly-tag tagActive': 'ly-tag'"
          @click="handerChange(tag)"
          :title="tag.label"
          @mouseover="overIcon(tag.path)"
          @mouseout="outIcon(tag.path)"
          
        >
          <!-- <div class="show-text">{{tag.label }}</div>
          <img src="@/assets/images/blue-close.png" alt="" v-show="route.path === tag.path && index !== 0" class="icon-info" @click.stop="removeTag(tag)">
          <img src="@/assets/images/black-close.png" alt="" class="icon-info hover-icon" v-show="route.path != tag.path && hoverPath == tag.path && index !== 0" @click.stop="removeTag(tag)"> -->
          <el-dropdown trigger="contextmenu" @command="(commandName)=>tagsHandle(commandName,tag)" :ref="'dropdown'+tag.name" @visible-change="(flag)=>tagsVisibleHandle(flag,tag)">
            <div style="width:100%;height:100%;display: flex;justify-content:flex-start;position: relative;align-items:center;box-sizing: border-box;padding: 0px 16px;" :style="{paddingLeft:index === 0 && isShowBtn?'48px':'16px',color:route.path === tag.path?'#3480FF':'#222222'}">
              <div class="show-text">{{tag.label }}</div>
              <img src="@/assets/images/blue-close.png" alt="" v-show="route.path === tag.path && index !== 0" class="icon-info" @click.stop="removeTag(tag)">
              <img src="@/assets/images/black-close.png" alt="" class="icon-info hover-icon" v-show="route.path != tag.path && hoverPath == tag.path && index !== 0" @click.stop="removeTag(tag)">
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="self">关闭当前</el-dropdown-item>
                <el-dropdown-item command="other">关闭其他标签</el-dropdown-item>
                <!-- <el-dropdown-item command="right">关闭右侧标签页</el-dropdown-item> -->

              </el-dropdown-menu>
            </template>
          </el-dropdown>

        
        </div>

    </div>
    <div
      class="right-btn"
      @click="scrollHandle('add')"
      v-show="isShowBtn"
    >
      <img src="@/assets/images/double-jt-2.png" alt="">
    </div>
  </div> 
</template>
<style lang="less" scoped>
@import "@/styles/index.less";
.scroll-bar {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  height: 100%;
  box-sizing: border-box;
  padding-top:4px;
  background: #fff;
  .show-text{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    line-height: 14px;
    font-size: 14px;
  }
  .left-btn {
    position: absolute;
    left: 0;
    height: 32px;
    background:rgba(255,255,255,1);
    width: 32px;
    top: 0;
    z-index: 2;
    cursor: pointer;
    box-shadow: 2px -2px 4px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      width: 12px;
      height: 8px;
    }
  }
  .right-btn {
    position: absolute;
    right: 0;
    height: 32px;
    background:rgba(255,255,255,1);
    width: 32px;
    top: 0;
    z-index: 2;
    cursor: pointer;
    box-shadow: -1px 2px 4px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      width: 12px;
      height: 8px;
    }
  }
  .scroll-bar-wc {
    height: 100%;
    position: relative;
    left: 0;
    box-sizing: border-box;
    .ly-tag {
      position: relative;
      display: flex;
      float: left;
      justify-content: flex-start;
      align-items: center;
      height: 100%;
      
      text-align: center;
      background: #fff;
      font-size: 14px;
      color: @fontColor_black;
      box-sizing: border-box;
      margin-right: -1px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      .hover-icon{
        // display: none;
      }
      .icon-info{
        cursor: pointer;
        width: 14px;
        height: 14px;
        margin-left:4px;
        position: relative;
        top:1px;
      }
      &::after{
        content:"";
        position: absolute;
        background: #DDDDDD;
        height: 14px;
        width: 1px;
        right: 0;
        top:6px;
        z-index: 1;
        display: block;
      }


      span {
        display: inline-block;

      }
      .h-c-dds {
        right: 15px;
        position: absolute;
      }
      &:first-child{
        

      }
      &:last-child{
        .h-c-dds{
          right:25px;
        }
      }
    }
    .tagActive {
      background: #F3F3F3;
      border-radius: 8px 8px 0 0;
      color:#3480FF;
      &::after{
        content: "";
        display: none;
      }
    }
  }
}

</style>
